<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="css/login.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" id="login-box">


    <div class="form-container sign-up-container">
        <form id="sign-up-form">
            <h1>注册</h1>
            <div class="txtb">
                <input type="text"  id="name-sign-up" required>
                <span data-placeholder="Name" ></span>
            </div>
            <div class="txtb">
                <input type="text"  id="phone-sign-up" required>
                <span data-placeholder="Phone Number" ></span>
            </div>
            <div class="txtb">
                <input type="password"  id="password-sign-up"  required>
                <span data-placeholder="Password" ></span>
            </div>
            <div class="txtb">
                <input type="password" id="confirmPassword-sign-up"  required>
                <span data-placeholder="Confirm Password" ></span>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form id="sign-in-form" >
            <h1>登录</h1>
            <div class="txtb">
                <input type="text" name="username" id="username-sign-in" required>
                <span data-placeholder="用户名/手机号"  ></span>
            </div>
            <div class="txtb">
                <input type="password" name="password" id="password-sign-in"  required>
                <span data-placeholder="密码" ></span>
            </div>
<!--            <a href="#">忘记密码？</a>-->
            <div class="con_select" >
                <input type="radio"  name="t1" value="用户" required/>用户
                <input type="radio"  name="t1" value="管理员" required/>管理员
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有账号？</h1>
                <p>请使用您的账号进行登录</p>
                <button class="ghost" id="signIn" >登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有账号?</h1>
                <p>立即注册加入我们</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>

    </div>
</div>
</body>
<script>

    function checkForm() {
        const name = $('#name-sign-up').val();
        const phone= $('#phone-sign-up').val();
        const password = $('#password-sign-up').val();
        const confirmPwd = $('#confirmPassword-sign-up').val();


        // 手机号码必须为11位数字
        if ( phone.length !== 11 || isNaN(phone)) {
            alert("请输入11位数字的手机号码！");
            return false;
        }

        // 密码至少8位
        if (password.length < 6) {
            alert("密码至少为6位！");
            return false;
        }

        // 密码和确认密码必须一致
        if (password !== confirmPwd) {
            alert("密码和确认密码必须一致！");
            return false;
        }

        // 禁止输入某些字符
        var regExp = /[&<>'"]/;
        if (regExp.test(name) || regExp.test(password)) {
            alert("姓名和密码不能包含以下字符：& < > ' \"");
            return false;
        }

        return true;
    }


    $(document).ready(function() {
        const nameInput = $('#name-sign-up');
        const phoneInput= $('#phone-sign-up');
        const passwordInput = $('#password-sign-up');
        // const confirmPwdInput = $('#confirmPassword-sign-up');

        const form = $('#sign-up-form');


        form.on('submit', function(e) {
            e.preventDefault();

            if (!checkForm()) {
                return false;
            }

            var name = nameInput.val();
            var phone = phoneInput.val();
            var password = passwordInput.val();
            $.ajax({
                url: './api/signUp/',
                method: 'POST',
                data: { name: name,phone: phone ,password: password },
                success: function(response) {
                    alert('注册成功！');
                    window.location.href = response; // 重定向到指定页面 login.html
                },
                error: function(xhr, status, error) {
                    if(xhr.responseText.startsWith("e01"))
                        alert("注册失败，该手机号已注册");
                    else alert("注册失败！")

                }
            });
        });
    });

</script>
<script>
    $(document).ready(function() {
        const usernameInput = $('#username-sign-in');
        const passwordInput = $('#password-sign-in');

        const loginForm = $('#sign-in-form');

        loginForm.on('submit', function(e) {
            e.preventDefault();

            // 获取输入的用户名和密码
            var username = usernameInput.val();
            var password = passwordInput.val();

            var selectedOption = $('input[name="t1"]:checked').val();

            var loginUrl = '';

            if (selectedOption === '管理员') {
                loginUrl = './api/login/admin';
            } else {
                loginUrl = './api/login/customer';
            }


            $.ajax({
                url: loginUrl,
                method: 'POST',
                // data: JSON.stringify({ username: username, password: password }),
                data: { username: username, password: password },
                success: function(response) {
                    // alert('登录成功！');
                    window.location.href = response; // 重定向到指定页面 xxx_home.html
                },
                error: function(xhr, status, error) {
                    alert('登录失败！');
                    // window.location.href = '/'; // 登录失败时重定向到登录页面
                }
            });
        });
    });

</script>


<!--<script>-->
<!--    const usernameInput = document.querySelector('#username-sign-in');-->
<!--    const passwordInput = document.querySelector('#password-sign-in');-->
<!--    const loginForm = document.querySelector('#sign-in-form');-->


<!--    loginForm.addEventListener('submit',  async function (e) {-->
<!--        e.preventDefault();-->

<!--        var username = usernameInput.value;-->
<!--        var password = passwordInput.value;-->
<!--        var selectedOption = document.querySelector('input[name="t1"]:checked');-->
<!--        if (!selectedOption) {-->
<!--            alert("请选择登录类型");-->
<!--            return;-->
<!--        }-->

<!--        var loginUrl = '';-->

<!--        if (selectedOption.value === '管理员') {-->
<!--            loginUrl = './api/login/admin';-->
<!--        } else {-->
<!--            loginUrl = './api/login/customer';-->
<!--        }-->

<!--        try {-->
<!--            const response = await axios.post(loginUrl, { username, password })e;-->
<!--            alert('登录成功！');-->
<!--        } catch (error) {-->
<!--            alert('登录失败！');-->
<!--        }-->
<!--    });-->
<!--</script>-->
<script>
    $("#signUp").click(function(){
        $("#login-box").addClass('right-panel-active')
    })

    $("#signIn").click(function(){
        $("#login-box").removeClass('right-panel-active')
    })

    $(".txtb input").on("focus",function(){
        $(this).addClass("focus")
    })

    $(".txtb input").on("blur",function(){
        if($(this).val() == '')
            $(this).removeClass("focus")
    })

</script>
</html>
